
<template>
  <div class="interface">
    <h3 class="title-info">基本信息</h3>
    <el-row class="content-info">
      <el-col :span="2">
        <div class="colKey">接口名称：</div>
      </el-col>
      <el-col :span="10">
        <div class="colName">{{ info.description }}</div>
      </el-col>
    </el-row>
    <el-row class="content-info">
      <el-col :span="2">
        <div class="colKey">接口路径：</div>
      </el-col>
      <el-col :span="10">
        <div class="colName">
          <el-tag :type="filterTags(info.method)" size="medium">{{
            info.method
          }}</el-tag>
          &nbsp; {{ info.path }}
        </div>
      </el-col>
    </el-row>
    <h3 class="title-info">接口参数</h3>
    <el-row class="content-info">
      <el-col :span="24">
        <div class="colKey">Headers</div>
      </el-col>
      <el-col :span="24">
        <el-table :data="headers" border style="width: 100%">
          <el-table-column
            prop="name"
            label="参数名称"
            width="180"
          ></el-table-column>
          <el-table-column prop="default" label="参数值"></el-table-column>
          <el-table-column prop="required" label="是否必须">
            <template slot-scope="scope">
              <dir>{{ scope.row.required }}</dir>
            </template>
          </el-table-column>
          <el-table-column
            prop="type"
            label="参数类型"
            width="180"
          ></el-table-column>
          <el-table-column prop="description" label="备注"></el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24">
        <div class="colKey">Body:</div>
      </el-col>
      <el-col :span="24">
        <el-table :data="bodys" border style="width: 100%">
          <el-table-column
            prop="name"
            label="参数名称"
            width="180"
          ></el-table-column>
          <el-table-column prop="default" label="参数值">
            <template slot-scope="scope">
              <div>
                <json-viewer
                  :value="getJsonModel(scope.row.schema)"
                  :expand-depth="5"
                  copyable
                  boxed
                  sort
                ></json-viewer>
                <!-- <pre>{{ getJsonModel(scope.row.schema) }}</pre> -->
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
      <el-col :span="24">
        <div class="colKey">Query：</div>
      </el-col>
      <el-col :span="24">
        <el-table :data="querys" border style="width: 100%">
          <el-table-column
            prop="name"
            label="参数名称"
            width="180"
          ></el-table-column>
          <el-table-column prop="default" label="参数值"></el-table-column>
          <el-table-column prop="required" label="是否必须">
            <template slot-scope="scope">
              <dir>{{ scope.row.required }}</dir>
            </template>
          </el-table-column>
          <el-table-column
            prop="type"
            label="参数类型"
            width="180"
          ></el-table-column>
          <el-table-column prop="description" label="备注"></el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <h3 class="title-info">接口返回</h3>
    <br>
    <el-row class="content-info">
      <el-col :span="24">
        <el-table :data="responses" border style="width: 100%">
          <el-table-column
            prop="code"
            label="状态码"
            width="180"
          ></el-table-column>
          <el-table-column prop="description" label="原因"></el-table-column>
          <el-table-column prop="schema" label="返回值">
            <template slot-scope="scope">
              <div   v-if='scope.row.model'>
                <json-viewer
                  :value="scope.row.model"
                  :expand-depth="5"
                  copyable
                  boxed
                  sort
                ></json-viewer>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="type"
            label="参数类型"
            width="180"
          ></el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  props: {
    id: {
      type: String,
      default: 0
    }
  },
  data() {
    return {
      activeName: "first",
      info: {}
    };
  },
  created() {
    this.info = this.$store.state.permission.paths.find(el => {
      return el.id == this.id;
    });
  },
  methods: {
    getJsonModel(ref) {
      var model = this.findModelByRef(ref["$ref"]);
      return this.formatModel(model);
    },
    findModelByRef(ref) {
      let model = ref.split("/")[2];
      return this.$store.state.permission.models.find(el => {
        return el.name == model;
      });
    },
    //格式化Model
    formatModel(model) {
      var properties = model.properties;
      for (const key in properties) {
        if (properties.hasOwnProperty(key)) {
          const el = properties[key];
          if (el["type"] == "array") {
            if (el["items"]["$ref"]) {
              el["items"] = this.findModelByRef(el.items.$ref);
              if (el["items"].name == model.name) {
                el["items"] = {};
                continue;
              }
            }
            this.formatModel(el["items"]);
            el["type"] = "array";
          }
        }
      }
      return properties;
    },
    handleClick() {},
    filterTags(tag) {
      switch (tag) {
        case "post":
          return "success";
        case "get":
          return "info";
        default:
          break;
      }
    }
  },
  computed: {
    headers() {
      return this.info.data.parameters.filter(el => {
        return el.in == "header";
      });
    },
    bodys() {
      return this.info.data.parameters.filter(el => {
        return el.in == "body";
      });
    },
    querys() {
      return this.info.data.parameters.filter(el => {
        return el.in == "query";
      });
    },
    responses() {
      var responses = this.info.data.responses;
      let resArray = [];
      let res = {};
      res.code = this.$main.obj.get_object_first_attribute(responses);
      res.description = responses[res.code].description;
      // res.model={};
      if (res.code != "200"){
             resArray.push(res);
             return resArray;
      }

      res.type = responses[res.code].schema.type;

      if(res.code == "200" && responses[res.code].schema['$ref'])
         res.model= this.getJsonModel(responses[res.code].schema)

      if (res.code == "200" && responses[res.code].schema['items']) {
        if (responses[res.code].schema.items.$ref)
          res.model= this.getJsonModel(responses[res.code].schema.items)
      }

      resArray.push(res)
      return resArray;
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.interface {
  margin: 1%;
  .title-info {
    font-weight: 400;
    margin-top: 0.48rem;
    margin-bottom: 0.16rem;
    border-left: 3px solid #2395f1;
    padding-left: 8px;
  }
  .content-info {
    margin: 8px 0;
    padding: 5px;
    width: 70%;
    box-sizing: border-box;
    .el-col {
      line-height: 32px;
    }
    .colKey {
      font-weight: 700;
      text-align: left;
      width: 100px;
      padding-left: 10px;
    }
    .colName {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
  }
}
</style>
